<template>
  <!--角色管理-->
  <el-row :gutter="20">
    <el-col :span="18">
      角色管理：<br><br>
      <role-manage></role-manage>
    </el-col>
    <el-col :span="6">
      设置的权限：<br><br>
      <el-input
        v-model="json"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20 }"
        placeholder=""
      ></el-input>
    </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent, ref, computed } from 'vue'
  // 模块的操作按钮
  import { roleManage, regRoleState } from '../../../lib-role/main'
  
  // 加载模块
  import jsonModule from './json/modules.json'
  import jsonButtons from './json/button.json'
  import jsonGrids from './json/grid.json'

  import jsonFinds from './json/find.json'
  import jsonResourcess from './json/resources.json'
  import jsonAPIs from './json/api.json'


  /**
   * 角色的维护
   */
  export default defineComponent({
    name: 'nf-role-module',
    components: {
      roleManage
    },
    props: {
    },
    setup(props, context) {
      
      const state = regRoleState()

      const json = computed(() => JSON.stringify(state.roleInfo.rolePower, null ,2))

      state.modules = jsonModule 
      state.buttons = jsonButtons
      state.grids = jsonGrids

      state.finds = jsonFinds
      state.resources = jsonResourcess
      state.APIs = jsonAPIs

      return {
        state,
        json
      }
    }
  })
</script>
